<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Motion UI Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" />
    <link rel="stylesheet" href="../_build/motion-ui.css" />
    <style>
      #yeti {
        display: block;
        max-width: 400px;
        margin: 2rem auto;
      }
    </style>
  </head>
  <body>

    <div class="column row">
      <h1>Motion UI Test</h1>

      <hr>

      <div class="row column collapse medium-6" style="margin: 0 auto;">
        <div class="small-8 columns">
          <select id="transitionList">
            <optgroup label="Slide">
              <option value="slide-in-up">slide-in-up</option>
              <option value="slide-in-right">slide-in-right</option>
              <option value="slide-in-down">slide-in-down</option>
              <option value="slide-in-left">slide-in-left</option>
              <option value="slide-out-up">slide-out-up</option>
              <option value="slide-out-right">slide-out-right</option>
              <option value="slide-out-down">slide-out-down</option>
              <option value="slide-out-left">slide-out-left</option>
            </optgroup>
            <optgroup label="Fade">
              <option value="fade-in">fade-in</option>
              <option value="fade-out">fade-out</option>
            </optgroup>
            <optgroup label="Spin">
              <option value="spin-in">spin-in</option>
              <option value="spin-in-ccw">spin-in-ccw</option>
              <option value="spin-out">spin-out</option>
              <option value="spin-out-ccw">spin-out-ccw</option>
            </optgroup>
            <optgroup label="Scale">
              <option value="scale-in-up">scale-in-up</option>
              <option value="scale-in-down">scale-in-down</option>
              <option value="scale-out-up">scale-out-up</option>
              <option value="scale-out-down">scale-out-down</option>
            </optgroup>
            <optgroup label="Hinge">
              <option value="hinge-in-from-top">hinge-in-from-top</option>
              <option value="hinge-in-from-right">hinge-in-from-right</option>
              <option value="hinge-in-from-bottom">hinge-in-from-bottom</option>
              <option value="hinge-in-from-left">hinge-in-from-left</option>
              <option value="hinge-in-from-middle-x">hinge-in-from-middle-x</option>
              <option value="hinge-in-from-middle-y">hinge-in-from-middle-y</option>
              <option value="hinge-out-from-top">hinge-out-from-top</option>
              <option value="hinge-out-from-right">hinge-out-from-right</option>
              <option value="hinge-out-from-bottom">hinge-out-from-bottom</option>
              <option value="hinge-out-from-left">hinge-out-from-left</option>
              <option value="hinge-out-from-middle-x">hinge-out-from-middle-x</option>
              <option value="hinge-out-from-middle-y">hinge-out-from-middle-y</option>
            </optgroup>
          </select>
        </div>
        <div class="small-4 columns">
          <button class="expanded button" id="transitioner">Transition!</button>
        </div>
      </div>

      <img id="yeti" src="yeti.svg">
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
    <script>
      $(function() {
        var $yeti = $('#yeti');
        var $transitionList = $('#transitionList');

        $('#transitioner').click(function() {
          var value = $transitionList.val();

          if (value.match(/-in/)) {
            Foundation.Motion.animateIn($yeti, value);
          }
          else {
            Foundation.Motion.animateOut($yeti, value, function() {
              $yeti.show();
            });
          }
        });
      });
    </script>
  </body>
</html>
